var app = new Vue({
	el: "#app",
	data: {
		typeArr: [],
		currentId: 1,
		btnStyle: [],
		editor: null,
		code:true,
		md:''
	},
	computed:{
		codeObj(){
			var type = this.typeArr[this.currentId - 1];
			var codeObj = type?type.preview[type.currentType]:undefined;
			return codeObj;
		},
		codeHtml(){
			var codeHtml = this.codeObj? this.codeObj.html : "";
			if(this.codeObj && this.codeObj.fn!=""){
				codeHtml = codeHtml.replace(/"/g, "'");
				codeHtml = this.codeObj.fn + '("' + codeHtml + '")';
			}
			return codeHtml;
		},
		unsave(){
			var md = this.codeObj?this.codeObj.md : ""
			return md != this.md;
		}
	},
	mounted() {
		var config = JSON.parse($.ajax({
			url: "./config/data.json",
			async: false
		}).responseText)
		this.typeArr = config.typeArr;
		this.btnStyle = config.btnStyle;
		var _this = this;
		this.$nextTick(function(){
			_this.initEditor(_this.currentId);
		})
	},
	methods: {
		getPreview(){
			return this.typeArr[this.currentId-1].preview;
		},
		edit(){
			this.code=true;
			this.editor.setMarkdown(this.codeObj.md);
		},
		save(item) {
			var attr = item.currentType;
			this.$set(item.preview,attr,item.output[attr]);
			this.$set(item.preview[attr],"html",this.transform(this.editor.getHTML()));
			this.$set(item.preview[attr],"md",this.md);
		},
		remove(item,x){
			this.$delete(item.preview,x);
		},
		getToolbar(id) {
			var toolbar = ["undo", "redo", "|", "bold", "color", "italic", "underline", "quote", "hr", "|", "image", "link", "table", "html-entities", "clear", "|"];
			toolbar = toolbar.concat(this.typeArr[id - 1].toolbar);
			toolbar = toolbar.concat(["|", "search", "||", "preview", "watch", "fullscreen"]);
			return toolbar;
		},
		getToolbarIconTexts(id) {
			var toolbar = this.typeArr[id - 1].toolbar;
			var toolbarIconTexts = {};
			for(var i = 0; i < toolbar.length; i++) {
				toolbarIconTexts[toolbar[i]] = this.btnStyle[toolbar[i]].name;
			}

			return toolbarIconTexts;
		},
		getToolbarHandlers(id) {
			var toolbar = this.typeArr[id - 1].toolbar;
			var toolbarHandlers = {};
			for(var i = 0; i < toolbar.length; i++) {
				var _this = this;
				var name = toolbar[i];
				toolbarHandlers[name] = (function(i) {
					return function(cm, icon, cursor, selection) {
						var formate = _this.btnStyle[toolbar[i]].formate;
						formate = formate.replace(/src=""/g, "src=\"" + _this.typeArr[id - 1].src + "\"");
						if(selection == "") {
							selection = "内容"
						}
						formate = formate.replace(/内容/g, selection)
						cm.replaceSelection(formate);
					}
				})(i)
			}
			toolbarHandlers.underline = function(cm, icon, cursor, selection) {
				var str1 = "<span style=\"text-decoration:underline;\">";
				var str2 = "</span>";
				cm.replaceSelection(str1 + selection + str2);
				cm.setSelection({
					line: cursor.line,
					ch: str1.length + cursor.ch - selection.length
				}, {
					line: cursor.line,
					ch: str1.length + cursor.ch
				});
			}
			toolbarHandlers.color = function(cm, icon, cursor, selection) {
				this.executePlugin("colorDialog", "font-color-dialog/font-color-dialog")
			}
			return toolbarHandlers;
		},
		initEditor(id) {
			var _this = this,
				toolbar = _this.getToolbar(id),
				toolbarIconTexts = _this.getToolbarIconTexts(id),
				toolbarHandlers = _this.getToolbarHandlers(id);

			_this.editor = editormd("editormd", {
				mode: "markdown",
				path: "./editor.md-master/lib/",
				width: "98%",
				height: 600,
				placeholder: "输入你想录入的内容吧...",
				htmlDecode: "style",
				searchReplace: true,
				saveHTMLToTextarea: true,
				syncScrolling: "single",
				imageUpload: false, //图片上传功能  
				imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
				imageUploadURL: "https://v.iduov.com/headline/headline190305/",
				toolbarIcons: function() {
					return toolbar;
				},
				toolbarIconsClass: {
					color: "fa-adn", // 指定一个FontAawsome的图标类 
					underline: "fa-underline"
				},
				toolbarIconTexts: toolbarIconTexts,
				toolbarHandlers: toolbarHandlers,
				lang: {
					toolbar: {
						underline: "下划线",
						color: "字体颜色"
					}
				}
			})
		},
		transform(str) {
			var id = this.currentId;
			switch(id) {
				case 1:
					{
						str = str.replace(/<p>/g, '<p class="contentSec" style="word-break: normal;">');
						break;
					}
				case 2:
					{
						str = str.replace(/<p>/g, '<p class="words" style="word-break:normal;">');
						str = '<div style="padding:0 2%;">' + str + '</div>';
						break;
					}
				case 3:
					{
						str = str.replace(/<p>/g, '<p class="todyExpCont">');
						break;
					}
				case 4:
					{
						str = str.replace(/<p>/g, '<p class="wordsItem">');
						break;
					}
				case 5:
					{
						str = str.replace(/<hr><p>/g, '<p class="paragraph" style="padding-top:25px;">');
						str = str.replace(/<p>/g, '<p class="paragraph">');
						if(this.typeArr[id - 1].currentType == 'sel') {
							str = '<div style="background:#f8f8f8;padding:15px;">' + str + '</div>';
						} else {
							str = '<div style="background:#f2f9fe;padding:25px 5%;margin-top:30px">' + str + '</div>';
						}
						break;
					}
				case 6:
					{
						if(this.typeArr[id - 1].currentType == "sentence") {
							str = str.replace(/<p>/g, '<li style="margin-bottom:25px"><p class="paragraph">');
							str = str.replace(/<\/p>/g, '</p></li>');
							str = '<div class="concrete sectionBg" style="padding:30px 15px ;background:#FFF5E5;"><div style="padding:0;color:#C6901F;"><ul style="position:relative">' + str + '</ul></div></div>';
						}
						break;
					}
				case 7:
					{
						str = str.replace(/<p>/g, '<p class="paragraph" style="word-break:normal;color:#a95a25;">');
						break;
					}
			}
			
			return str;
		},
		getMd(){
			this.md = this.editor.getMarkdown();
		}
	}
})